<template>


  <div class="background">
    <el-image :src="src"
     style=" width:100%;
    height:100%;
    z-index:-1;
    position: absolute;"></el-image>
  <div class="block">
    <el-span class="large">登录</el-span>

    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-form-item label="账号:" prop="username" style="width:400px">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password" style="width:400px">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item
        label="验证码"
        prop="captcha"
        style="width:246px;display:inline-block;vertical-align: top;"
      >
        <el-input v-model="form.captcha"></el-input>
      </el-form-item>
      <el-image
        style="display:inline-block;height:40px;"
        :src="form.url"
      ></el-image>
      <el-form-item style="text-align:center;">
        <el-button type="primary" @click="onSubmit('form')">立即登录</el-button>
         <router-link to="/register"><el-button>注册账号</el-button></router-link>
      </el-form-item>
    </el-form>
  </div>
    </div>
</template>

<script>
const axios = require("axios");
const uuid = require("uuid");
export default {
  data() {
    return {
       src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
      form: {
        username: "",
        password: "",
        captcha: "",
        uuid: uuid.v4(),
        url: "http://127.0.0.1:9001/sys/captcha.jpg?uuid="
      },
      rules: {
        username: [
          { required: true, message: "请输入账号", trigger: "blur" },
          {
            min: 4,
            max: 15,
            message: "账号长度在 4 到 15 个字符",
            trigger: "blur"
          }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 6,
            max: 18,
            message: "密码长度在 6 到 18 个字符",
            trigger: "blur"
          }
        ],
        captcha: [
          { required: true, message: "请输入验证码", trigger: "blur" },
          {
            min: 4,
            max: 4,
            message: "请正确输入验证码，验证码长度为4个字符",
            trigger: "blur"
          }
        ]
      }
    };
  },
  methods: {
    //用户登录
    onSubmit(formName) {
      this.$refs[formName].validate(valid => {
        var token= window.sessionStorage.getItem('token');
        console.log(token);
        if (valid) {
          axios
            .post("http://127.0.0.1:9001/sys/login", this.form)
            .then(response => {
              if (response.data.code !== 0) {
                //登录失败 打印错误信息
                this.$message({
                  message: response.data.msg,
                  type: "warning"
                });
              } else {
                //登录成功
                this.$router.push("/index");
                window.sessionStorage.setItem("token",response.data.token);
              }
            });
            //刷新验证码
            this.flushCode();
        }
      });
    },
    //刷新验证码
    flushCode() {
      this.form.uuid = uuid.v4();
      this.form.url = "http://127.0.0.1:9001/sys/captcha.jpg?uuid=" + this.form.uuid;
      console.log(this.form.url);
    }
  },
  created() {
    const uid = uuid.v4();
    this.form.uuid = uid;
    this.form.url = this.form.url + uid;
  }
};
</script>

<style>
body {
  position: relative;
}
.background{
    width:100%;
    height:760px;  /**宽高100%是为了图片铺满屏幕 */
    z-index:-1;
    position: absolute;


}
.block {
  /* margin: 10px; */
  position: absolute;
  left: 50%;
  top: 50%;
  text-align:center;
  transform: translate(-70%, 60%);
  margin-top: -250px;
}
a {
  text-decoration: none;
}
</style>
